<template>

    <div class="seachye clearfix">
        <slot></slot>
        <div style="float:right;line-height: 47px;">
             登录账号：{{username}}
        <el-button style="margin-left:40px;" icon="el-icon-edit" size="mini" @click="dialogTableVisible = true">修改密码</el-button>
        <el-button icon="el-icon1-erp-tuichu" @click="outLogin()" size="mini">退出</el-button>

        </div>
       
         <el-dialog title="修改密码" v-dialogDrag :visible.sync="dialogTableVisible" width="380px" height="500px"
    :modal="false" :close-on-click-modal="false">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="85px">
            <el-form-item label="原密码" prop="oldPassword">
                <el-input v-model="ruleForm.oldPassword" type="password" style="width:220px;"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword1">
                <el-input v-model="ruleForm.newPassword1"  type="password" style="width:220px;"> </el-input>
            </el-form-item>
            <el-form-item label="确认新密码" prop="newPassword2">
                <el-input v-model="ruleForm.newPassword2"  type="password" style="width:220px;"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                <el-button  @click="resetForm('ruleForm')" style="margin-left: 50px;">重填</el-button>
            </el-form-item>
        </el-form>
        </el-dialog>
    </div>

   
</template> 

<script>
export default{
    data(){
        var validateOldPass = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('请输入原始密码'));
            }else{
                callback();
            }
            
        };
        var validatePass1 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.ruleForm.newPassword2 !== '') {
                    this.$refs.ruleForm.validateField('newPassword2');
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.ruleForm.newPassword1) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            dialogTableVisible:false,
            ruleForm:{
              oldPassword:'',
              newPassword1:'',
              newPassword2:''
            },
            rules:{
                oldPassword: [
                    { validator: validateOldPass, trigger: 'blur' }
                ],
                newPassword1: [
                    { validator: validatePass1, trigger: 'blur' }
                ],
                 newPassword2:[
                    { validator: validatePass2, trigger: 'blur' }
                ]
            }
        }
    },    
    computed:{
        username(){
            const user =  sessionStorage.getItem('usermsg')||'';
            if(user){
                return JSON.parse(sessionStorage.getItem('usermsg')).user
            }else{
                return '未知(重新登陆显示)'
            }
        },
    },
    methods: {
        submitForm(formName){ //修改密码
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let params = {password:this.ruleForm.oldPassword,newPassword:this.ruleForm.newPassword2}
                    this.$http.post('/server/user/password',this.qs.stringify(params))
                    .then(res => {
                        let datas = res.data;
                        if(datas.success) {
                            this.$alert('密码修改成功,请用新密码重新登陆!','修改密码提示!',{
                                confirmButtonText: '确定',
                                closeOnPressEscape:true,
                                callback: action => {
                                    sessionStorage.removeItem('token');
                                    sessionStorage.removeItem('expire')
                                    sessionStorage.removeItem('usermsg')
                                    window.location.href = '/login?redirect='+ this.$route.path    //浸入式跳转，防止页面缓存
                                }
                            })
                        }else{
                            this.$alert(datas.errorMsg,'修改密码提示',{
                                confirmButtonText: '确定',
                                closeOnPressEscape:true,
                                callback: action => {}
                            })
                        }
                    })
                    .catch(err => {

                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },

        outLogin(){ //退出登陆

            this.$confirm('是否确认退出登陆?', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '成功退出登陆!'
                })
                sessionStorage.removeItem('token');
                sessionStorage.removeItem('expire')
                sessionStorage.removeItem('usermsg')
                window.location.href = '/login?redirect='+ this.$route.path    //浸入式跳转，防止页面缓存
                //this.$router.push({path: '/login', query: {redirect: this.$route.path}})
                
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消退出登陆'
                })
            })
        }
    }
}
</script>
<style scoped>
    .seachye {
       width: 100%;

       color:#fff;
    }
    .seachye .left{
        float: left;
    }

</style>